<script setup>
	import {
		h,
		ref,
		reactive
	} from 'vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	import { ElMessage, ElMessageBox } from 'element-plus'

	const router = useRouter()
	const route = useRoute()

	const tableData = ref([{
		keyword: 'test',
		rules: '完全匹配',
		suffix: '.com|.cn|.net',
		remark: '测试',
		remind: '站内信|短信|邮件',
		add_time: '2024-11-04 16:30:30',
		status: 0
	}, {
		keyword: 'hello',
		rules: '包含',
		suffix: '全部',
		remark: '你好',
		remind: '站内信',
		add_time: '2024-11-04 16:30:30',
		status: 1
	}, {
		keyword: '190',
		rules: '完全匹配',
		suffix: '.com|.cn|.net',
		remark: '测试',
		remind: '站内信|短信|邮件',
		add_time: '2024-11-04 16:30:30',
		status: 0
	}, {
		keyword: 'fight',
		rules: '包含',
		suffix: '全部',
		remark: '你好',
		remind: '站内信',
		add_time: '2024-11-04 16:30:30',
		status: 1
	}, {
		keyword: 'or',
		rules: '完全匹配',
		suffix: '.com|.cn|.net',
		remark: '测试',
		remind: '站内信|短信|邮件',
		add_time: '2024-11-04 16:30:30',
		status: 0
	}, {
		keyword: 'hi',
		rules: '包含',
		suffix: '全部',
		remark: '你好',
		remind: '站内信',
		add_time: '2024-11-04 16:30:30',
		status: 1
	}, {
		keyword: 'love',
		rules: '完全匹配',
		suffix: '.com|.cn|.net',
		remark: '测试',
		remind: '站内信|短信|邮件',
		add_time: '2024-11-04 16:30:30',
		status: 0
	}, {
		keyword: 'and',
		rules: '包含',
		suffix: '全部',
		remark: '你好',
		remind: '站内信',
		add_time: '2024-11-04 16:30:30',
		status: 1
	}, {
		keyword: 'peace',
		rules: '完全匹配',
		suffix: '.com|.cn|.net',
		remark: '测试',
		remind: '站内信|短信|邮件',
		add_time: '2024-11-04 16:30:30',
		status: 0
	}, {
		keyword: 'nice',
		rules: '包含',
		suffix: '全部',
		remark: '你好',
		remind: '站内信',
		add_time: '2024-11-04 16:30:30',
		status: 1
	}])

	const tableData2 = ref([{
		suffix: 'test.com',
		remark: '测试',
		remind: '站内信|短信|邮件',
		add_time: '2024-11-04 16:30:30',
		status: 0
	}, {
		suffix: 'hello.cn',
		remark: '你好',
		remind: '站内信',
		add_time: '2024-11-04 16:30:30',
		status: 1
	}, {
		suffix: '190.vip',
		remark: '测试',
		remind: '站内信|短信|邮件',
		add_time: '2024-11-04 16:30:30',
		status: 2
	}, {
		suffix: 'fight.cn',
		remark: '你好',
		remind: '站内信',
		add_time: '2024-11-04 16:30:30',
		status: 1
	}, {
		suffix: 'good.cn',
		remark: '测试',
		remind: '站内信|短信|邮件',
		add_time: '2024-11-04 16:30:30',
		status: 0
	}, {
		suffix: 'or.net',
		remark: '你好',
		remind: '站内信',
		add_time: '2024-11-04 16:30:30',
		status: 1
	}, {
		suffix: 'veryveryverylonglengthdomain.com.cn',
		remark: '测试',
		remind: '站内信|短信|邮件',
		add_time: '2024-11-04 16:30:30',
		status: 2
	}, {
		suffix: 'and.com',
		remark: '你好',
		remind: '站内信',
		add_time: '2024-11-04 16:30:30',
		status: 1
	}, {
		suffix: 'peace.com',
		remark: '测试',
		remind: '站内信|短信|邮件',
		add_time: '2024-11-04 16:30:30',
		status: 0
	}, {
		suffix: 'nice.com',
		remark: '你好',
		remind: '站内信',
		add_time: '2024-11-04 16:30:30',
		status: 2
	}])


	const handleSizeChange = (val) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val) => {
		console.log(`current page: ${val}`)
	}

	const placeholder = "多个关键词请换行分隔，每次提交最多十条域名"

	const dmName = ref(false)

	const dmFocus = () => {
		dmName.value = true
	}
	const dmBlur = () => {
		dmName.value = false
	}

	const form = reactive({})
	const form2 = reactive({})

	const multipleSelection = ref([])
	const multipleSelection2 = ref([])

	const currentPage = ref(1)
	const currentPage2 = ref(1)
	const total = 1000
	const total2 = 900

	const title = ref('新增提醒')

	const dialogVisible = ref(false)

	const dialogVisible2 = ref(false)


	const isCollapse = ref(true)

	const handleSelectionChange = (val) => {
		multipleSelection.value = val
	}

	const handleSizeChange2 = (val) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange2 = (val) => {
		console.log(`current page: ${val}`)
	}

	const handleSelectionChange2 = (val) => {
		multipleSelection2.value = val
	}

	const onConcel = () => {
		dialogVisible.value = false
	}

	const onSubmit = () => {
		dialogVisible.value = false
	}

	const addClick = () => {
		title.value = '新增提醒'
		dialogVisible.value = true
	}

	const handleEdit = (row, index) => {
		title.value = '编辑提醒'
		dialogVisible.value = true
	}

	const getStringLen = (str) => {
		if (str) {
			let arr = str.split('\n')
			return arr.length
		} else {
			return 0
		}
	}
	
	const addClick2 = () => {
		title.value = '新增提醒'
		dialogVisible2.value = true
	}
	
	const handleEdit2 = (row, index) => {
		title.value = '编辑提醒'
		dialogVisible2.value = true
	}
	
	const onConcel2 = () => {
		dialogVisible2.value = false
	}
	
	const onSubmit2 = () => {
		dialogVisible2.value = false
	}
	
	const handleDel = (row,index) =>{
		ElMessageBox({
			title: '',
			customClass: 'custom-message',
			message: h('div', null, [
				h('h4', null, '已选择6条预订提醒'),
				h('span', {
					style: 'color: #F04134'
				}, '删除后不可恢复'),
				h('span', {
					style: 'color: #999999'
				}, '，确定删除吗？'),
			]),
			showCancelButton: true,
			confirmButtonText: '继 续',
			cancelButtonText: '取 消',
			type: 'warning'
		}).then((action) => {
			ElMessage({
				type: 'success',
				message: `操作成功`,
			})
		})
	}
	

	const operateClick = () => {
		ElMessageBox({
			title: '',
			customClass: 'custom-message',
			message: h('div', null, [
				h('h4', null, '已选择6条预订提醒'),
				h('span', {
					style: 'color: #F04134'
				}, '删除后不可恢复'),
				h('span', {
					style: 'color: #999999'
				}, '，确定删除吗？'),
			]),
			showCancelButton: true,
			confirmButtonText: '继 续',
			cancelButtonText: '取 消',
			type: 'warning'
		}).then((action) => {
			ElMessage({
				type: 'success',
				message: `操作成功`,
			})
		})
	}
</script>
<template>
	<div class="container">
		<div class="top-title">
			预订提醒
		</div>
		<div class="table-box">
			<div class="table-title">
				关键词预订提醒 <div class="table-open" v-if="!isCollapse" @click="isCollapse = true">
					<el-icon><D-Arrow-Right /></el-icon>
				</div>
			</div>
			<el-dialog v-model="dialogVisible" width="520">
				<template #header>
					<div class="dialog-header">
						<span class="dialog-title">{{title}}</span> 新增后默认开始监控
					</div>
				</template>
				<el-form :model="form" label-width="95px">
					<el-form-item label="关键词：" required>
						<div class="wrapdmTextarea" style="width: 100%;">
							<div class="textarea-warp" style="z-index: 200; top: 0;">
								<textarea id="textarea" :placeholder="placeholder" class="ui-input dmTextarea"
									name="domain" @focus="dmFocus" @blur="dmBlur" :class="dmName ? 'dmTyping' : ''"
									style="overflow-y: auto;" v-model="form.keyword"></textarea>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="后缀：" required>
						<el-checkbox-group v-model="form.suffix">
							<el-checkbox value=".com" name="suffix">
								.com
							</el-checkbox>
							<el-checkbox value=".cn" name="suffix">
								.cn
							</el-checkbox>
							<el-checkbox value=".net" name="suffix">
								.net
							</el-checkbox>
							<el-checkbox value=".vip" name="suffix">
								.vip
							</el-checkbox>
							<el-checkbox value=".org" name="suffix">
								.org
							</el-checkbox>
							<el-checkbox value=".com.cn" name="suffix">
								.com.cn
							</el-checkbox>
							<el-checkbox value=".top" name="suffix">
								.top
							</el-checkbox>
							<el-checkbox value=".xyz" name="suffix">
								.xyz
							</el-checkbox>
							<el-checkbox value="all" name="suffix">
								全部后缀
							</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="匹配规则：" required>
						<el-radio-group v-model="form.rules">
							<el-radio value="0">完全匹配</el-radio>
							<el-radio value="1">包含</el-radio>
							<el-radio value="2">开头</el-radio>
							<el-radio value="3">结尾</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="提醒方式：" required>
						<el-checkbox-group v-model="form.remind">
							<el-checkbox value="0" name="mode">
								站内信
							</el-checkbox>
							<el-checkbox value="1" name="mode">
								短信
							</el-checkbox>
							<el-checkbox value="2" name="mode">
								邮件
							</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="备注：">
						<el-input v-model="form.remark" placeholder="请输入备注" maxlength="20" />
					</el-form-item>
					<el-form-item>
						<div class="form-btns">
							<el-button @click="onConcel">取 消</el-button>
							<el-button type="warning" @click="onSubmit">确 定</el-button>
						</div>
					</el-form-item>
				</el-form>
			</el-dialog>
			<div v-if="isCollapse" style="margin-top: 20px;">
				<div class="table-tool">
					<div class="tool-left">
						<span class="selected">
							已选择{{multipleSelection.length}}条 ，
						</span>
						<el-select v-model="form.operate" placeholder="选择操作" clearable
							style="width: 100px;margin-right:15px;">
							<el-option label="开始监控" value="start"></el-option>
							<el-option label="暂停监控" value="pause"></el-option>
							<el-option label="删除监控" value="delete"></el-option>
						</el-select>
						<el-button @click="operateClick">批量操作</el-button>
					</div>
					<div class="tool-right">
						<el-input v-model="form.search" style="width: 240px" placeholder="查找提醒内容" clearable
							prefix-icon="Search"></el-input>
						<el-button type="warning" icon="CirclePlus" style="margin-left: 15px;"
							@click="addClick()">新增</el-button>
					</div>
				</div>
				<el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange"
					style="width: 100%" show-overflow-tooltip>
					<el-table-column type="selection" width="50"></el-table-column>
					<el-table-column prop="keyword" label="提醒关键词" width="180">
					</el-table-column>
					<el-table-column prop="rules" label="匹配规则"></el-table-column>
					<el-table-column prop="suffix" label="域名后缀" align="center">
					</el-table-column>
					<el-table-column prop="remark" label="备注" align="center" width="200">
					</el-table-column>
					<el-table-column prop="remind" label="提醒方式">
					</el-table-column>
					<el-table-column prop="add_time" label="添加时间" sortable align="center" width="180">
					</el-table-column>
					<el-table-column prop="status" align="center" width="130">
						<template #header>
							<el-select v-model="form.status" placeholder="状态" style="width: 100px">
								<el-option label="监控中" :value="0"></el-option>
								<el-option label="已暂停" :value="1"></el-option>
							</el-select>
						</template>
						<template #default="scope">
							<span v-if="scope.row.status == 0" class="td-success">监控中</span>
							<span v-if="scope.row.status == 1" class="td-warn">已暂停</span>
						</template>
					</el-table-column>
					<el-table-column align="center" width="140">
						<template #default="scope">
							<div class="operate-btns flex-center">
								<el-button link style="margin-right:10px" 	@click="handleEdit(scope.row,scope.index)">编辑</el-button>
								<el-dropdown>
									<el-button link>更多<el-icon class="el-icon--right"><arrow-down /></el-icon></el-button>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item >开始</el-dropdown-item>
											<el-dropdown-item >暂停</el-dropdown-item>
											<el-dropdown-item @click="handleDel(scope.row,scope.index)">删除</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<div class="pager-box">
					<div class="pager-total">共有 {{total}}条关键词提醒</div>
					<el-pagination v-model:current-page="currentPage" :page-size="50" :background="true"
						:page-sizes="[10, 20, 50]" layout="prev, pager, next,sizes,jumper" :total="total"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" />
				</div>
			</div>
		</div>
		<el-dialog v-model="dialogVisible2" width="520">
			<template #header>
				<div class="dialog-header">
					<span class="dialog-title">{{title}}</span> 新增后默认开始监控
				</div>
			</template>
			<el-form :model="form2" label-width="95px">
				<el-form-item label="域名：" required>
					<div class="wrapdmTextarea" style="width: 100%;">
						<div class="textarea-warp" style="z-index: 200; top: 0;">
							<textarea id="textarea" :placeholder="placeholder" class="ui-input dmTextarea" name="domain"
								@focus="dmFocus" @blur="dmBlur" :class="dmName ? 'dmTyping' : ''"
								style="overflow-y: auto;" v-model="form2.keyword"></textarea>
							<div v-if="dmName" class="textarea-limit">
								{{getStringLen(form2.keyword)}}/10
							</div>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="提醒方式：" required>
					<el-checkbox-group v-model="form2.remind">
						<el-checkbox value="0" name="mode">
							站内信
						</el-checkbox>
						<el-checkbox value="1" name="mode">
							短信
						</el-checkbox>
						<el-checkbox value="2" name="mode">
							邮件
						</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="备注：">
					<el-input v-model="form2.remark" placeholder="请输入备注" maxlength="20" />
				</el-form-item>
				<el-form-item label="自动预订：">
					<el-switch v-model="form2.auto" class="ml-2" style="--el-switch-on-color: #F68A0C;" />
					<p class="form-tip">当域名可预订时，默认使用价格最低的通道自动预订并扣除保证金。<br />
						您可输入接受的最高通道价格，高于此价格将不会为您自动预订。</p>
				</el-form-item>
				<el-form-item>
					<div class="form-btns">
						<el-button @click="onConcel2">取 消</el-button>
						<el-button type="warning" @click="onSubmit2">确 定</el-button>
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>
		<div class="table-box">
			<div class="table-title">
				域名预订提醒 <div class="table-open" v-if="isCollapse" @click="isCollapse = false">
					<el-icon><D-Arrow-Right /></el-icon>
				</div>
			</div>
			<div v-if="!isCollapse" style="margin-top: 20px;">
				<div class="table-tool">
					<div class="tool-left">
						<span class="selected">
							已选择{{multipleSelection.length}}条 ，
						</span>
						<el-select v-model="form.operate" placeholder="选择操作" clearable
							style="width: 100px;margin-right:15px;">
							<el-option label="开始监控" value="start"></el-option>
							<el-option label="暂停监控" value="pause"></el-option>
							<el-option label="删除监控" value="delete"></el-option>
						</el-select>
						<el-button @click="operateClick">批量操作</el-button>
					</div>
					<div class="tool-right">
						<el-input v-model="form2.search" style="width: 240px" placeholder="查找提醒内容" clearable
							prefix-icon="Search"></el-input>
						<el-button type="warning" icon="CirclePlus" style="margin-left: 15px;" @click="addClick2">新增</el-button>
					</div>
				</div>
				<el-table ref="multipleTableRef2" :data="tableData2" @selection-change="handleSelectionChange2"
					style="width: 100%" show-overflow-tooltip>
					<el-table-column type="selection" width="50"></el-table-column>
					<el-table-column prop="suffix" label="提醒域名" width="250">
					</el-table-column>
					<el-table-column prop="remark" label="备注" align="center" width="200">
					</el-table-column>
					<el-table-column prop="remind" label="提醒方式">
					</el-table-column>
					<el-table-column prop="add_time" label="添加时间" sortable align="center" width="180">
					</el-table-column>
					<el-table-column prop="status" width="130">
						<template #header>
							<el-select v-model="form.status" placeholder="状态" style="width: 100px">
								<el-option label="监控中" :value="0"></el-option>
								<el-option label="已暂停" :value="1"></el-option>
								<el-option label="自动预订" :value="2"></el-option>
							</el-select>
						</template>
						<template #default="scope">
							<span v-if="scope.row.status == 0" class="td-success">监控中</span>
							<span v-if="scope.row.status == 1" class="td-warn">已暂停</span>
							<span v-if="scope.row.status == 2" class="td-purple">自动预订</span>
						</template>
					</el-table-column>
					<el-table-column align="center">
						<template #default="scope">
							<div class="operate-btns flex-center">
								<el-button link @click="handelEdit2(scope.row,scope.index)">编辑</el-button>
								<el-dropdown>
									<el-button link> 更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
									</el-button>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item>开始</el-dropdown-item>
											<el-dropdown-item>暂停</el-dropdown-item>
											<el-dropdown-item>自动预订</el-dropdown-item>
											<el-dropdown-item>删除</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<div class="pager-box">
					<div class="pager-total">共有 {{total}}条关键词提醒</div>
					<el-pagination v-model:current-page="currentPage2" :page-size="50" :background="true"
						:page-sizes="[10, 20, 50]" layout="prev, pager, next,sizes,jumper" :total="total2"
						@size-change="handleSizeChange2" @current-change="handleCurrentChange2" />
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang='scss'>
	.table-box {
		background: #FFFFFF;
		box-shadow: 0px 0px 14px 0px #00000017;
		border-radius: 10px;
		padding: 20px;
		margin-bottom: 20px;
	}

	.table-title {
		line-height: 28px;
		font-size: 18px;
		font-weight: 700;
		text-align: left;
		color: #3D3D3D;
		position: relative;
	}

	.table-open {
		cursor: pointer;
		display: inline-block;
		transform: rotate(90deg);
		width: 28px;
		height: 28px;
		text-align: center;
	}

	.table-open:hover {
		color: #F68A0C;
	}

	.form-btns {
		text-align: right;
		width: 100%;
	}

	.form-btns .el-button:hover {
		color: #fff;
		background-color: #F68A0C;
		border-color: #F68A0C;
	}

	.form-btns .el-button--warning {
		background-color: #F68A0C;
		border-color: #F68A0C;
	}

	.form-btns .el-button--warning:hover {
		background-color: #F27202;
		border-color: #F27202;
	}

	.dialog-title {
		font-weight: 700;
		color: #333;
	}

	.dialog-header {
		font-size: 12px;
		color: #999;
	}

	.form-tip {
		font-size: 12px;
		color: #999;
		line-height: 16px;
	}
</style>